<template>
  <div>
      <p>姓名：{{user.name}} 资产：{{user.money}}  价格：<span style="color:red">{{price}}</span></p>
      <p v-show="user.is_gift">赠送商品：<button>领取</button></p>
      <div>
          <p class="p">结算账单</p>
            <table border="1">
                <tr>
                    <td>商品</td>
                    <td>价格</td>
                    <td>购买数量</td>
                </tr>
                <tr v-for='item in cart'>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.num}}</td>
                </tr>
            </table>
            <p> <button @click="pay">购买</button></p>
        </div>
        <div>
            <p>历史记录</p>
            <table border="1" width='500'>
                <tr>
                    <td>商品名称</td>
                    <td>购买价格</td>
                </tr>
                <tr v-for="item in history">
                    <td>
                        <span v-for=" i in item.goods">{{i.name}}&emsp;</span>
                    </td>
                    <td>{{item.money}}</td>
                </tr>
            </table>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            cart:[],
            user:'',
            price:0,
            history:'',
        }
    }, 
    created(){
        this.cart= sessionStorage.getItem('cart')
        this.show_goods()
        this.get_user()
        this.count_price()
        this.get_history()
    },
    methods:{
        get_gift(){
            var id= sessionStorage.getItem('id')
            axios.get('http://127.0.0.1:8000/myapp/gift/',{
                params:{id:id}
            }).then(res=>{
                console.log(res.data)
                alert(res.data.msg)
            })
        },
        pay(){
            if(this.user.money<this.price){
                alert('金额不足 请充值')
                window.location.href='/get_money'
            }
            var formdata= new FormData()
            formdata.append('id',sessionStorage.getItem('id'))
            formdata.append('cartstr',sessionStorage.getItem('cart'))
            formdata.append('price',this.price)

            axios.post('http://127.0.0.1:8000/myapp/pay/',formdata).then(res=>{
                console.log(res.data)
                if(res.data.code==200){
                    sessionStorage.removeItem('cart')
                    alert('购买成功')
                }
                window.location.reload()

            })
        },
        get_history(){
            axios.get('http://127.0.0.1:8000/myapp/pay/',{
                params:{id:sessionStorage.getItem('id')}
            }).then(res=>{
                var data=[]
                for(let i=0;i<res.data.data.length;i++){
                    data.push({
                        id:res.data.data[i].id,
                        name:res.data.data[i].name,
                        goods:JSON.parse(res.data.data[i].goods),
                        money:res.data.data[i].money
                    })
                }
                this.history = data
            })
        },
        count_price(){
            if(this.cart){
                for(let i=0;i<this.cart.length;i++){
                    this.price += (this.cart[i].num * this.cart[i].price)
                }
            }

        },
        show_goods(){
            this.cart=JSON.parse(this.cart)
            console.log(this.cart)
        },
        get_user(){
            var id= sessionStorage.getItem('id')
            axios.get('http://127.0.0.1:8000/myapp/login/',{
                params:{id:id}
            }).then(res=>{
                console.log(res.data)
                if(res.data.code==200){
                    this.user= res.data.data
                }
            })
        }
    }
}
</script>

<style>
table{
    margin: 0 auto;
}

</style>